<template>
  <div class="home-head">
    <div class="shadow" :class="shadowIe"></div>
    <div class="shadow-bg"></div>
    <div class="home-text">
      <div class="home-text-left">
        <h1>把武汉还给我们!</h1>
        <p>在艰难中携手，在黑暗中一往无前一直到黎明，没有一个冬天不会过去，没有一个黎明不会来临，加油武汉，加油湖北，加油中国！</p>
      </div>
      <div class="home-text-right"></div>
      <div class="home-text-middle">{{ obj.output }}</div>
    </div>
  </div>
</template>

<script type="text/babel">
import EasyTyper from "easy-typer-js";
export default {
  data() {
    return {
      // 绑定ie浏览器的class类名
      shadowIe: '',
      // 打字机的配置
      obj: {
        output: '',
        type: 'rollback',
        isEnd: false,
        speed: 100,
        backSpeed: 40,
        sleep: 3000,
        singleBack: false,
        sentencePause: false
      }
    }
  },
  created() {
    if (this.ifBrowser()) {
    // 解决filter: grayscale()不支持ie问题
      this.shadowIe = 'shadow-ie';
    }
  },
  mounted() {
    new EasyTyper(this.obj, `隔离的是病毒，凝聚的是同心`, (instance) => {
      // 循环的文字
      instance.input = [`武汉加油!`,`隔离的是病毒，凝聚的是同心`]
      // 循环
      instance.play();
    })
  },
  methods: {
    // 判断当前运行的是否为ie浏览器
    ifBrowser() {
      var explorer = navigator.userAgent;
      // ie
      if (explorer.indexOf("MSIE") >= 0) {
        return true;
      }
      // ie 11
      else if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      }
    }
  }
}
</script>

<style scoped>
.home-head {
  /* position: relative; */
  width: 100%;
  height: 100%;
  background: url(../../assets/images/head-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  /* transform: translate(-50%, 0); */
  background-image: url(../../assets/images/head-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* 裁剪右半部分 */
  clip: rect(0px, 50vw, 100vh, 0px);
  filter: grayscale(100%);
}
.shadow-ie {
  background-image: url(../../assets/images/head-bg-ie.jpg);
}
.shadow-bg {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
}
.home-text {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
}
.home-text > .home-text-left,
.home-text > .home-text-right {
  position: absolute;
  top: 0;
  padding: 80px;
  padding-top: 150px;
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  color: rgb(235, 235, 235);
  font-size: 14px;
}
.home-text > .home-text-right {
  right: 0;
}
.home-text > .home-text-left p {
  text-align: left;
}
.home-text > .home-text-middle {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  width: 40%;
  height: 80px;
  line-height: 80px;
  background: rgba(0, 0, 0, .6);
  color: rgb(235, 235, 235);
  box-shadow: 0 0 10px #000;
  font-size: 18px;
}
</style>
